<template>
	<!--index 1为活动 2为文案  type 1方案 2 案例分享-->
	<view class="home">
		<navigator  open-type="navigateBack" class="goback">
			<u-icon name="arrow-left" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
			{{title}}/查看全部
		</navigator>
		<view class="search">
			<view style="display: flex;align-items: center;justify-content: center; color: #ccc;width: 100%;height: 60rpx;"  v-show="!goSearch" @click="goSearch=true">
				<image src="/static/img/search.png" style="width: 35rpx; height: 35rpx;margin-right: 20rpx;" mode="aspectFit" />
				搜索
			</view>
			<u-input v-model="searchKeyWord" @blur="goSearch=false" v-show="goSearch" style="width: 80%;margin: auto;" placeholder=""  type="text" :border="false" />
		</view>
		<view class="itemArr">
				<titleRow :titleName="titleName1"></titleRow>
				<view class="item">
					<image src="/static/img/new.png" mode="aspectFit" />
					<view class="time">2021-08-21</view>
					<view class="itemContent">
						<text>清仓活动特价大甩卖</text>
						<u-icon name="arrow-right" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
					</view>
				</view>
				<view class="item">
					<image src="/static/img/new.png" mode="aspectFit" />
					<view class="time">2021-08-21</view>
					<view class="itemContent">
						<text>清仓活动特价大甩卖</text>
						<u-icon name="arrow-right" color="#444" size="28" style="margin-right: 10rpx;"></u-icon>
					</view>
				</view>
				
		</view>
		
		
		
	</view>
</template>


<script>
	import titleRow from '@/component/titleRow/titleRow.vue'

	export default {
		data() {
			return {
				title : '',
				index : '',
				type:'',
				searchKeyWord:'',
				goSearch:false,
			};
		},
		computed:{
			
			titleName1(){
				return `${this.title}${this.type}（253）`
			},
		},
		methods:{
			goMore(_type){
				console.log(_type);
				uni.navigateTo({
					url:`../allActiveAndDocument/allActiveAndDocument?index=${this.index}&type=${_type}`
				})
			},
		},
		onLoad(option) {
			this.index = option.index
			option.index==1 ? this.title = '活动' : this.title = '文案'
			option.type==1 ? this.type = '方案' : this.type = '案例分享'
		},
		components:{
			titleRow,
		}
	}
</script>

<style lang="scss" scoped>
.home {
	padding: 10rpx 20rpx;
  .goback {
	height: 70rpx;
	display: flex;
	align-items: center;
	
	color: #444444;
  }

  .search {
	height: 80rpx;
	background: #FFFFFF;
	box-shadow: 0px 1px 10px rgba(221, 221, 221, 0.5);
	border-radius: 28rpx;
	display: grid;
	place-items: center;
	margin-bottom: 15rpx;
  }

	

  .itemArr {
    titlerow {

    }
	
    .item {
		margin-bottom: 20rpx;
		box-sizing: content-box;
		padding: 0 35rpx;
		position: relative;
		background-color: #F9FAFB;
		height: 174rpx;
		border-radius: 8rpx;
	  image{
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 100rpx;
		  height: 100rpx;
	   }
      .time {
		color: #888888;
		height: 87rpx;
		display: flex;
		align-items: center;
      }

      .itemContent {
		  border-top: 2rpx solid #EEEEEE;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  align-items: center;
		  height: 86rpx;
        text {

        }

       
      }
    }
  
	.moreBtn{
		margin-top: -20rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #888888;
	}

  }
}
</style>
